<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>用户登录</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="page-single">
      <div class="container">
        <div class="row">
          <div class="col col-login mx-auto">
            <div class="text-center mb-6">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </div>
            <div class="dimmer" id="dimmer_body">
              <div class="loader"></div>
              <form class="card dimmer-content">
                <div class="card-body p-6">
                  <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <input type="text" name="email" class="form-control" id="exampleInputEmail" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label class="form-label">
                      密码
                      <a href="./password_forgot.html" class="float-right small">忘记密码</a>
                    </label>
                    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label class="custom-control custom-checkbox">
                      <input type="checkbox" class="custom-control-input" id="remember_me" checked />
                      <span class="custom-control-label">记住账号</span>
                    </label>
                  </div>
                  <div class="form-footer">
                    <button id="sigin_button" type="button" class="btn btn-primary btn-block" onclick="signin()">登录</button>
                  </div>
                </div>
              </form>
            </div>

            <div class="text-center text-muted">
              还没有账号? <a href="./register.html">注册账号</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
    require(["jquery"], function($){
    $("input[name=email]").val(window.localStorage.email)

    $("body").keyup(function(event){
      if(event.keyCode == 13){
        $("#sigin_button").click()
      }
    })
  })

  // 登录
  function signin() {
    let inputEmail = $("#exampleInputEmail").val()
    let inputPassword = $("#exampleInputPassword").val()
    let remember = $("#remember_me").is(":checked")
    let form_data = {
      email: inputEmail,
      password: inputPassword
    }
    console.log(form_data)

    if (inputEmail == "" || inputPassword == "") {
      showAlert("fe-alert-triangle", `邮箱、密码不能为空！`, "alert-danger")
      return false
    } 
    if (checkEmail(inputEmail) != true) {
      showAlert("fe-alert-triangle", `请输入有效邮箱！`, "alert-danger")
      return false
    }
    if (remember){
      window.localStorage.email = inputEmail
    }else{
      window.localStorage.email = ""
    }
    go_signin(form_data)

  }

  function go_signin(form_data) {
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/login", {
      method: "POST",
      data: JSON.stringify(form_data),
      contentType: "application/json",
      dataType: "json",
      headers: {}

    }).done(function (data) {
      console.log(data)
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        localStorage.Token = data["data"]["token"]
        localStorage.UserName = data["data"]["user_name"]
        localStorage.UserHeadImg = data["data"]["user_head_img"]
        console.log(localStorage)

        // 跳转首页
        setTimeout(function () {
          window.location.href = "./index.html"
        }, 1500)
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function (xhr, status) {
      console.log(xhr)
      showAlert("fe-alert-triangle", `服务器错误`, "alert-danger")
    }).always(() => {
      $("#dimmer_body").removeClass("active")
    })
  }
</script>

</html>